<template>
  <div class="menu">
    <div class="foldButton" @click="spreadEvent">|||</div>
    <el-menu
      @select="handleSelect"
      :collapse = "isCollapse"
      :default-active= "activeIndex"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      :collapse-transition = "false"
    >
      <el-menu-item
        v-for="(item, key) of menuList"
        :key="key"
        :index="item.name"
      >
        <span slot="title">{{ item.navItem }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        { name: "/Students", navItem: "学生列表" },
        { name: "/Table2", navItem: "成绩管理" },
        { name: "/Major", navItem: "专业管理" },
        { name: "/Course", navItem: "课程管理" },
        { name: "/MajorCourse", navItem: "专业课程管理" },
        { name: "/Upload", navItem: "文件上传" },
        { name: "/Base", navItem: "基础信息管理" }
      ],
      activeIndex:'/Students',
      isCollapse: false,
    };
  },
  // props:['isCollapse'],
  created(){
      this.fetchData()
  },
  watch:{
      "$route":"fetchData"
  },
  methods: {
    changeNav() {
      var path = this.$route.path;
      console.log('当前的地址'+path);
      this.activeIndex = path;
    },
    handleSelect(key,keyPath) {
      console.log('我点击了');
      
    },
    fetchData() {
        if(this.$route.name =='/Table1'){
          this.activeIndex = '/Table1'
        } else if(this.$route.name =='/Table2'){
          this.activeIndex = '/Table2'
        } 
    },
    // 折叠展开事件
    spreadEvent() {
      console.log('点击展开');
      this.isCollapse = !this.isCollapse;
      console.log(this.isCollapse);
      //向外界传递事件
      this.$emit('changeMenuEvent',this.isCollapse);


    }
  },
  mounted() {
     this.changeNav()
     console.log('menu 的 mounted 方法');
  },
  
  
};
</script>

<style>
  .el-menu-vertical-demo{
    border-right:solid 1px #545c64 ;
  }
  .foldButton {
    background-color: #545c64;
    font-size: 10px;
    /* 设置显示的行高 */
    line-height: 50px;
    text-align: center;
    /* 设置显示的间距 */
    letter-spacing: 0.2em;
    
    /* 设置鼠标停留 是个小手 */
    cursor: pointer;
    
  }
</style>
